/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent, PropType } from "vue";
/* scss */
import "@gpt/components/prompt-word/index.scss";
/* types */
import { SettingGPTPromptWordItem } from "@gpt/types";

enum SettingGPTPromptWordItemEventEnum {
  Change = 'change',
  Click = 'click',
  Delete = 'delete'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTPromptWordItem,
  emits: [
    SettingGPTPromptWordItemEventEnum.Change,
    SettingGPTPromptWordItemEventEnum.Click,
    SettingGPTPromptWordItemEventEnum.Delete
  ],
  props: {
    value: {
      type: Object as PropType<SettingGPTPromptWordItem>,
      default: () => ({})
    },
    onChange: {
      type: Function
    },
    onDelete: {
      type: Function
    }
  },
  data() {
    return {
      form: {
        title: '',
        content: ''
      } as SettingGPTPromptWordItem
    }
  },
  computed: {
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.SettingGPTPromptWordItem]: true
      }
    },
    titleLabel(): string {
      return '标题'
    },
    titlePlaceholder(): string {
      return '请输入用户常用提示示例，帮助用户触发能力'
    },
    contentLabel(): string {
      return '内容'
    },
    contentPlaceholder(): string {
      return '请输入用户常用提问示例描述，帮助用户触发能力'
    },
    rules(): Record<string, any> {
      return {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'change'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'change'
          }
        ]
      
      }
    }
  },
  watch: {
    value: {
      handler(value: SettingGPTPromptWordItem) {
        this.form = {
          ...value
        }
      },
      immediate: true
    }
  },
  methods: {
    onChangeTitleHandler(value: string) {
      this.form.title = value
      this.onChangeHandler()
    },
    onChangeContentHandler(value: string) {
      this.form.content = value
      this.onChangeHandler()
    },
    onChangeHandler() {
      this.$emit(SettingGPTPromptWordItemEventEnum.Change, this.form)
    },
    onDeleteHandler() {
      this.$emit(SettingGPTPromptWordItemEventEnum.Delete, this.form)
    },
    onFormInputHandler() {
      
    },
    validate(): Promise<boolean> {
      // @ts-ignore
      return this.$refs.ElForm?.validate()
    },
    clearValidate() {
      // @ts-ignore
      return this.$refs.ElForm?.clearValidate()
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        
        <div 
          class="setting-gpt-prompt-word-item-delete"
          onClick={this.onDeleteHandler}
        >
          <i class="iconfont icon-delete"></i>
        </div>
        
        <el-form 
          ref='ElForm'
          label-position='top'
          {...{
            props: {
              model: this.form,
              rules: this.rules
            }
          }}
          onInput={this.onFormInputHandler}
        >
          
          <el-form-item prop="title" label={this.titleLabel}>
            <el-input
              placeholder={this.titlePlaceholder}
              maxlength={15}
              value={this.form.title}
              onInput={this.onChangeTitleHandler}
            />
          </el-form-item>
          
          <el-form-item prop="content" label={this.contentLabel}>
            <el-input
              placeholder={this.contentPlaceholder}
              maxlength={100}
              value={this.form.content}
              onInput={this.onChangeContentHandler}
            />
          </el-form-item>
        </el-form>
        
      </div>
    )
  }
});